<?php
if (!empty($_FILES['file'])){
    echo json_encode($_FILES['file']);
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="public/webuploader/webuploader.css">
<script type="text/javascript" src="public/jquery.js"></script>
<script type="text/javascript" src="public/webuploader/webuploader.js"></script>
</head><body>
<div id="uploader" class="wu-example">
    <div class="btns">
        <div id="fileName"></div>
        <div id="info"></div>
        <div id="picker">开始上传</div>
    </div>
</div>

<script>
$(function(){
var uploader = WebUploader.create({
    auto: true,
    // swf文件路径
    swf: 'public/webuploader/Uploader.swf',

    // 文件接收服务端。
    server: 'webuploader.php',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: {
        id: '#picker',
        multiple: false
    },
    thumb: false,
    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false,
    compress: false,
    duplicate: true
});

uploader.on( 'fileQueued', function( file ) {
    $( '#fileName' ).text(file.name);
});


// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    $( '#info' ).text('上传中'+(percentage * 100) + '%');
    //$( '#info' ).text('上传中');
});

uploader.on( 'uploadSuccess', function( file,ret ) {
    $( '#info' ).text('已上传');
    console.log(ret);
});

uploader.on( 'uploadError', function( file ) {
    $( '#info' ).text('上传出错');
});

uploader.on( 'uploadComplete', function( file ) {
    $( '#info' ).text('上传完成');
});
});
</script>
</body>
</html>
